<!-- 网点运单页 -->
<template>
  <view class="itemBody">
    <Search @search="getParams" />
    <scroll-view @scrolltolower="handleScroll" scroll-y="true" style="height: 80vh" v-if="showList">
      <view v-for="(item, index) in formList" :key="index">
        <!-- 根据billFlag判断渲染哪个组件 -->
        <!-- <WayItem v-if="['全部', '待确认', '待支付', '运输中', '已完成'].includes(billFlag)" :item="item" class="item" /> -->
        <WayItem v-if="['全部', '待确认', '运输中', '已完成'].includes(billFlag)" :item="item" class="item" @cancel="reload" />
        <ReviewItem v-if="['待审核'].includes(billFlag)" :item="item" class="item" />
        <SignItem v-if="['待提货'].includes(billFlag)" :item="item" class="item" />
      </view>
    </scroll-view>
    <view v-if="!showList" class="empty">
      <view style="text-align: center">
        <image class="img" src="../../assets/images/index/empty4.png"></image>
        <span class="font">查询不到相关结果，请修改关键词重新查询</span>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { OrderListType, WaybillType } from '@/type/index'
import { getListNew } from '@/@api/waybill' // waybill的接口.
import { getWaitExamineNew } from '@/@api/review' // 待审核的接口
import { getWaitForReceiveList } from '@/@api/sign' // 待提货的接口
import WayItem from '@/components/WayItem/index.vue' // 网点详情的列表组件
import ReviewItem from '@/components/ReviewItem/index.vue' // 待审核的列表组件
import SignItem from '@/components/SignItem/index.vue' // 待提货的列表组件

import Search from '@/components/searchPopup2/index.vue' // 查询组件
import Taro, { useReady } from '@tarojs/taro'

const loading = ref(false)
const formList = ref<OrderListType[]>([])
const billFlag = ref('') //订单类型

const query = ref({
  pageNum: 1,
  pageSize: 15
})
const params = ref() // params参数

const showList = ref(true) // 是否显示列表/显示缺省图

useReady(() => {
  Taro.setNavigationBarTitle({
    title: '网点运单'
  })
})

/* 获取子组件的参数 */
function getParams(data, flag) {
  console.log(JSON.parse(JSON.stringify(data)), JSON.parse(JSON.stringify(flag)), '子组件的参数')
  query.value.pageNum = 1
  formList.value = []
  loading.value = false
  billFlag.value = flag

  // 如果是待审核params要多加 两个字段 examineFlag: true，filterFlag: false
  if (flag == '待审核') {
    params.value = {
      ...data,
      examineFlag: true,
      filterFlag: false
    }
  } else {
    params.value = data
  }

  initList()
}

async function initList() {
  let res
  console.log(billFlag.value, JSON.parse(JSON.stringify(query.value)), '页数', JSON.parse(JSON.stringify(params.value)), 'init传给后端的数参数')
  if (billFlag.value == '待审核') {
    res = await getWaitExamineNew(query.value, params.value) // 待审核
  } else if (billFlag.value == '待提货') {
    res = await getWaitForReceiveList(query.value, params.value) // 待提货
  } else {
    res = await getListNew(query.value, params.value)
  }
  if (res.data.code == 200) {
    if (res.data.rows.length !== 0) {
      // 有数据就回显
      formList.value = setStatusVal([...formList.value, ...res.data.rows])
      console.log(JSON.parse(JSON.stringify(formList.value)), billFlag.value, '网点运单过滤处理过的数据')
      loading.value = false
      if (formList.value.length >= res.data.total) {
        loading.value = true
      }
      showList.value = true
    } else {
      // 无数据显示缺省页
      showList.value = false
    }
    // formList.value = setStatusVal([...formList.value, ...res.data.rows]).filter((item: OrderListType) => {
    //   return item.wxStatus != 1 && item.status != 1;
    // });
    // formList.value.forEach(obj => {
    //   console.log(obj.goodsInfo, 'goodsInfo');
    // });
  }
}

// 刷新列表
function reload() {
  query.value.pageNum = 1
  formList.value = []
  initList()
}

function handleScroll() {
  console.log('监听滚动')
  if (!loading.value) {
    query.value.pageNum++
    initList()
  }
}

// 添加状态标签
function setStatusVal(obj: OrderListType[]): OrderListType[] {
  let arr = obj.map((item: OrderListType) => {
    let str = statusFilter(item.wxStatus, item.status, item.isExamine, item.billNo)
    return {
      ...item,
      statusVal: str
    }
  })
  return arr
}

// 状态标签判断
function statusFilter(wxStatus: number, status: number, isExamine: number, billNo: string) {
  if (isExamine == 1 && wxStatus != 1 && billNo) {
    return '待审核'
  } else if (wxStatus == 1) {
    return '待确认'
  } else if (wxStatus == 2) {
    if ([4, 5, 6, 7].includes(status)) {
      return '待签收'
    } else if (status == 8) {
      return '已完成'
    } else {
      return '待支付'
    }
  } else if (wxStatus == 3) {
    return '未发货'
  } else if (wxStatus == 4) {
    return '运输中'
  } else if (wxStatus == 5) {
    return '待签收'
  } else if (wxStatus == 6) {
    return '已完成'
  } else {
    return '其他'
  }
}
</script>

<style lang="scss">
.itemBody {
  width: 100vw;
  height: 100%;
  background: #f5f5f5;
  .empty {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60vh;
    .img {
      width: 150rpx;
      height: 180rpx;
    }
    .font {
      font-size: 32rpx;
      color: #999;
    }
  }
}
</style>
